<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app" class="container mt-5">
        <div class="row justify-content-sm-center">
            <div class="col-sm-10 col-md-6 alert alert-secondary">
                <div class="form-group">
                    <label for="email">添加新邮箱：</label>
                    <!-- <input class="form-control " type="text" placeholder="请输入邮箱"
                        :class=" emailReg.test( email )&&!emails.includes( email )?'is-valid':'is-invalid' "
                        @input=" email=$event.target.value.trim() "
                    > -->
                    <!-- 
                        vue的插值表达式和指令可以调用 vue实例的方法仓库方法，但实际开发中建议以计算属性替代
                        当前案例中可以临时使用，实际项目中不建议
                    -->
                    <input class="form-control " type="text" placeholder="请输入邮箱"
                        :class=" checkEmail().check?'is-valid':'is-invalid' "
                        @input=" email=$event.target.value.trim() "
                    >
                    <div class="invalid-feedback">{{ checkEmail().msg }}</div>
                </div>
                <!-- <button class="btn btn-info btn-block btn-sm" type="button"
                    :disabled=" email.trim().length==0 "
                    @click=" emails.push(email) "
                >添加</button> -->
                <button class="btn btn-info btn-block btn-sm" type="button"
                    :disabled=" !emailReg.test( email ) || emails.includes( email ) "
                    @click=" emails.push(email) "
                >添加</button>
            </div>
        </div>
        <div class="row justify-content-sm-center">
            <div class="col-sm-10 alert alert-secondary">
                <ul class="list-group">
                    <li class="list-group-item text-center"
                        v-show=" emails.length==0 "
                    >请先添加邮箱</li>
                    <!-- Vue 不建议将 v-if 和 v-for 定义与同一个标签，因为 v-for 优先级更高  -->
                    <li class="list-group-item d-flex justify-content-between align-items-center"
                        v-for="(email, i) in emails"
                    >
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox">
                            <label class="form-check-label">{{ email }}</label>
                        </div>
                        <span class="badge badge-primary badge-pill p-2" @click="removeEmailByIndex(i)">删除</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            emailReg:/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
            email:"",
            emails:[ "aaaaaa@163.com","bbbbbbb@163.com" ]
        },
        methods: {
            removeEmailByIndex(i){
                this.emails.splice(i,1);
            },
            checkEmail(){
                let msg = "不是有效邮箱";
                let flag1 = this.emailReg.test(this.email);

                let legFlag = this.email.length == 0;
                if(legFlag) msg="邮箱不能为空";

                let flag2 = this.emails.includes(this.email);
                if(flag2) msg="邮箱已存在" ;

                let result = {
                    check:flag1&&!flag2,
                    msg:msg
                }
                return result;
            }
        },
    })
</script>

</html>